<template>
  <!-- 搜索栏 -->
  <div class="page_list_div">
    <el-form class="page_list_top" label-position="right">
      <div v-for="(item, index) in options.bars" :key="index">
        <el-form-item
          :label="item.label ? item.label + ':' : $t('m.search_') + ':'"
          class="page_list_top"
          v-if="item.type == 'input'"
          :key="index"
        >
          <el-input
            :placeholder="
              item.placeholder ? item.placeholder : $t('m.Oders_Search_')
            "
            prefix-icon="el-icon-search"
            style="width:330px;"
            clearable
            v-model="item.value"
          />
        </el-form-item>

        <el-form-item
          v-if="item.type == 'datePicker'"
          :key="index"
          :label="
            item.label ? item.label + ':' : $t('m.branch_Creationdate') + ':'
          "
          class="page_list_top"
        >
          <el-date-picker
            style="width:246px;"
            v-model="item.value"
            :picker-options="datePickerOptions"
            :default-value="timeDefaultShow"
            type="daterange"
            :default-time="['00:00:00', '23:59:59']"
            value-format="timestamp"
            format="yyyy-MM-dd"
            range-separator="~"
            :start-placeholder="$t('m.start_date')"
            :end-placeholder="$t('m.end_date')"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-if="item.type == 'select'"
          :key="index"
          :label="item.label ? item.label + ':' : $t('m.status') + ':'"
          class="page_list_top"
        >
          <el-select
            v-model="item.value"
            :placeholder="
              item.placeholder ? item.placeholder : $t('m.pleaseChoose')
            "
            :ref="setRef(item.label)"
            @change="searchHandle(false)"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item class="page_list_top page_list_search">
        <el-button class="reset_button" @click="searchHandle(false)">{{
          $t('m.search_')
        }}</el-button>
      </el-form-item>
      <el-form-item class="page_list_top">
        <el-button class="reset_button" @click="searchHandle(true)">{{
          $t('m.refresh')
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'search-bar',
  props: {
    /**
     * 配置项
     * @param search      搜索方法
     * @param bars        栏目项
     */
    options: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      datePickerOptions: {
        disabledDate (time) {
          let current_time = new Date().Format('yyyy-MM-dd') + ' 23:59:59' //时间日期为：‘当前日期 23:59:59’
          let t = new Date(current_time).getTime() //‘当前日期 23:59:59’的时间戳
          return time.getTime() > t
        }
      }
    }
  },
  computed: {},
  created () {
    this.timeDefaultShow = new Date()
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
  },
  methods: {
    // 搜索处理
    searchHandle (reset) {
      if (reset) {
        //清除数据
        this.options.bars.forEach(item => (item.value = ''))
        this.timeDefaultShow = new Date()
        this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
        this.options.search(reset)
        return
      }
      // 搜索处理：调用父组件的函数将构建好的搜索数据传出去
      // console.log('searchHandle', reset, this.options)
      const params = {}
      this.options.bars.forEach(item => {
        params[item.prop] = item.value ? item.value : ''
        this.$nextTick(() => {
          if (this.$refs[item.label]) {
            this.$refs[item.label].blur()
          }
        })
      })
      this.options.search(reset, params)
    },
    setRef (refName) {
      return el => {
        this.$refs[refName] = el
      }
    }
  }
}
</script>
<style scoped lang="scss">
/*搜索栏样式*/
.page_list_div {
  padding: 12px 20px 0 20px;

  //顶部搜索栏样式
  .page_list_top {
    display: flex;
    flex-wrap: wrap;

    ::v-deep .el-form-item {
      line-height: 36px;
      display: flex;
      align-items: center;
      margin: 0 20px 12px 0;
    }

    ::v-deep .el-form-item__content {
      line-height: 36px;
    }

    ::v-deep .el-form-item__label {
      height: 36px;
      line-height: 36px !important;
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: #39404d;
      padding-right: 8px !important;
    }

    ::v-deep .el-input__icon {
      height: 36px;
      line-height: 36px !important;
      font-size: 12px;
    }

    // .el-input__icon::placeholder {
    //   color: #d2d8e2; //提示文字颜色
    // }

    ::v-deep .el-date-editor .el-range-input {
      font-size: 12px !important;
      font-weight: 400;
      text-align: center;
      color: #39404d;
      line-height: 28px !important;
      padding: 0 !important;
    }
    ::v-deep .el-date-editor .el-range-separator {
      font-size: 12px !important;
      font-weight: 400;
      text-align: center;
      color: #39404d;
      line-height: 28px !important;
      padding: 0 !important;
    }

    ::v-deep .el-input__inner {
      height: 36px !important;
      border-radius: 4px;
      line-height: 36px;
      font-size: 12px;
      border: 1px solid #e4e4e6;
      font-weight: 500;
      text-align: left;
      // color: #39404d;
      // padding-left: 28px;
    }

    // .el-input__inner::placeholder {
    //   color: #d2d8e2; //提示文字颜色
    // }

    ::v-deep .el-range-separator {
      line-height: 24px;
    }

    ::v-deep .page_list_search {
      margin-right: 12px !important;
    }

    //重置按钮样式
    .reset_button {
      border: 1px solid #d2d8e2;
      background-color: #ffffff;
      color: var(--text-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      padding: 10px 20px;
      height: 36px;
      font-weight: 500;
      line-height: 36px;
      margin-left: 0px;
    }

    // .reset_button:hover {
    //   border: 1px solid var(--text-color);
    //   color: var(--text-color);
    // }

    // //搜索按钮样式
    // .search_button:hover {
    //   background-color: var(--text-color) !important;
    //   color: #ffffff !important;
    // }
  }
}
</style>
